<template>

  <el-container>
    <el-main>
      <el-row style="background-color:#42b983;height: 80px">
        <h2 align="center" >厨师风采</h2>
        <div >
        <el-dropdown>
      <span class="el-dropdown-link" >
        厨师分类<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item v-for="d in dish" :key="d.id" @click.native="handleClick(d)"  >{{d.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </div>
      </el-row>

      <el-row v-if="isShow">
        <h2>全部厨师</h2>
        <h6 style="color: red">可以点击厨师分类查看分类信息</h6>
        <el-col v-for="c in chefs" span="4">
          <el-card style="margin: 10px 0;height: 300px">
            <a   style="color: #333" @click="openEditDialog(c.id)">
              <img :src="c.imgUrl" width="100%" height="144" >
            </a>
            <p>姓名:{{c.name}}</p>
            <p>年龄:{{c.age}}</p>
            <p>个人介绍:{{c.description}}</p>
          </el-card>
        </el-col>
      </el-row>

      <h2>{{dName}}</h2>
      <el-row >
          <el-col v-for="cd in cDish" span="4">
            <el-card style="margin: 10px 0;height: 300px">
              <a   style="color: #333" @click="openEditDialog(cd.id)">
                <img :src="cd.imgUrl" width="100%" height="144" >
              </a>
              <p>姓名:{{cd.cname}}</p>
              <p>年龄:{{cd.age}}</p>
              <p>个人介绍:{{cd.description}}</p>
            </el-card>
          </el-col>
      </el-row>



      <el-dialog title="厨师详细信息" :visible.sync="editFormVisible">
        <el-form :model="editForm"  ref="editForm" label-width="120px">
          <el-form-item label="封面图" prop="imgUrl">
            <div style="height: 100px;width: 100px"  v-if="editForm.imgUrl">
              <el-image class="image"
                        :src="editForm.imgUrl"
                        fit="cover"></el-image>
            </div>
          </el-form-item>

          <el-form-item label="姓名" prop="name">
            <el-input v-model="editForm.name" disabled></el-input>
          </el-form-item>

          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="editForm.phoneNumber" disabled></el-input>
          </el-form-item>

          <el-form-item label="性别" prop="password">
            <el-input v-model="editForm.gender" disabled></el-input>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input v-model="editForm.age" disabled></el-input>
          </el-form-item>

          <el-form-item label="厨师介绍" prop="description">
            <el-input v-model="editForm.description" disabled></el-input>
          </el-form-item>

          <el-form-item label="可预约时间" prop="appointment">
            <el-input v-model="editForm.appointment" disabled></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>

    </el-main>
    <el-footer>Footer</el-footer>
  </el-container>

</template>

<script>


export default {
  data() {
    return {
      isShow: true,
      //厨师数据
      chefs: [],
      //菜品分类数据
      dish: [],
      cDish: [],
      dName: "",
      selectedItem: "",
      //详情对话框
      editFormVisible: false,
      editForm: {
        id: '',
        name: '',
        phoneNumber: '',
        password: '',
        age: '',
        gender: '',
        imgUrl: '',
        description: '',
        appointment: '',
        displayState: '',

      },

    }
  },
  methods: {



    //厨师分类列表显示
    DishSelect() {
      let url = 'http://localhost:9523/chef/lists';
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.dish = jsonResult.data.list;
          console.log("-----------------------"
              + this.dish)
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },


    handleClick(d) {
      this.isShow=false;
      this.selectedItem = d;
      console.log(`您选择了${d}`);
      console.log(`您选择了${d.id}`);
      let url = 'http://localhost:9523/chef/lists'+ d.id;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        console.log("---------------------"+jsonResult)
        if (jsonResult.state == 20000) {
          this.cDish = jsonResult.data;
          this.dName=d.name;
          console.log("-----------------------" + this.cDish)
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },

    openEditDialog(id) {
      let url = 'http://localhost:9523/chef/' + id;
      console.log('url = ' + url);

      this.axios
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.editForm = jsonResult.data;
          this.editFormVisible = true;
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
              this.loadChefList();
            }
          });
        }
      });
    },

    //显示厨师列表
    loadChefList() {
      let url = 'http://localhost:9523/chef/lists';
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.chefs = jsonResult.data.list;
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
    },

    mounted() {
      this.DishSelect();
      this.loadChefList();

  }
}
</script>

<style >
.el-dropdown-link {
  cursor: pointer;
  color: white;
  font-size: 16px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
